import React from 'react';
import { Input, Select, Button, Form } from 'antd';

import './index.less';
const { Option } = Select;
@Form.create()
class RolePage extends React.Component {
  handleSearch = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.handleSearch(values);
      }
    });
  };
  handleReset = () => {
    this.props.form.resetFields();
  };
  render() {
    const { optionselect } = this.props;
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
        <Form layout="inline" onSubmit={this.handleSearch}>
          <Form.Item label="User name">
            {getFieldDecorator('userName', {})(<Input style={{ width: 120 }} placeholder="User name" />)}
          </Form.Item>
          <Form.Item label="Role">
            {getFieldDecorator(
              'role',
              {}
            )(
              <Select defaultValue="" style={{ width: 120 }}>
                <Option value="">All</Option>
                {optionselect &&
                  optionselect.map(item => {
                    return (
                      <Option key={item.remark} value={item.remark}>
                        {item.remark || ''}
                      </Option>
                    );
                  })}
              </Select>
            )}
          </Form.Item>
          <Form.Item label="Status">
            {getFieldDecorator(
              'status',
              {}
            )(
              <Select defaultValue="" style={{ width: 120 }}>
                <Option value="">All</Option>
                <Option value="0">Active</Option>
                <Option value="1">Inactive</Option>
              </Select>
            )}
          </Form.Item>
          <Form.Item>
            <Button htmlType="submit" className="searchBtns">
              Search
            </Button>
          </Form.Item>
          <Form.Item>
            <Button style={{ marginLeft: 4 }} onClick={this.handleReset}>
              Reset
            </Button>
          </Form.Item>
          <Form.Item style={{ width: '100%' }}>
            <Button style={{ marginLeft: 4 }} onClick={this.props.showModal}>
              Add new role
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}
export default RolePage;
